<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07_计算属性</title>
    <!-- 引入Vue -->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 编写div元素 -->
    <div id="app">
        输入金额：<input type="text" v-model="total" />
        <!-- <h3>您一个消费了{{total}}元</h3> -->
        <h3>{{msg}}</h3>
    </div>
    <!-- 编写Vue实例 -->
    <script>
        const vm = new Vue({
            // VM
            el: '#app',
            data: {
                total: 0
            },
            // 再次封装，业务处理的解耦   计算属性用于对原始数据的再次加工
            computed: {
                msg() {
                    return `您一个消费了${this.total}元`
                }
            }
        })
    </script>
</body>

</html>